<template>
  <div class="page-container">
    <a-tabs v-model:active-key="activeType">
      <a-tab-pane key="1" title="待办规则配置">
        <div class="sticky-box">
          <div class="item-operator">
            <div class="todo-title">待办规则配置</div>
            <a-button v-permission="'svms:system:general:backlogRule.edit'" v-if="status == 'view'" type="primary" @click.stop="onEdit">
              编辑
            </a-button>
          </div>
        </div>
        <div class="px-5">
          <a-divider />
        </div>
        <TodoConfigDeital v-if="status === 'view'" :info="detail" />
        <TodoCofigForm v-else :form="detail" ref="formRef" />
      </a-tab-pane>
      <a-tab-pane v-if="status === 'view'" key="2" title="操作记录">
        <div class="px-5">
          <OperateLog v-if="activeType == 2" :id="detail.id" type="21" />
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
  <page-form-footer cancelText="返回" @ok="submitFn" :cancelFn="cancelFn" :ok-loading="okLoading" v-if="status === 'edit'" />
</template>

<script setup name="BacklogRule" lang="ts">
  import { ref, onMounted, onActivated } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { modifyRule, ruleDetail } from '@/api/system/backlogrule'
  import TodoConfigDeital from './detail/index.vue'
  import TodoCofigForm from './form/index.vue'
  import { useRoute } from 'vue-router'

  const formRef = ref()
  const status = ref('view')
  const detail = ref()
  const route = useRoute()
  const { query } = route

  const okLoading = ref(false)
  const onEdit = () => {
    status.value = 'edit'
  }

  const activeType = ref('1')
  // 编辑提交
  const submitFn = () => {
    formRef.value.save().then((response: any) => {
      modifyRule(response).then((res: any) => {
        Message.success(res.message)
        status.value = 'view'
        getDetail()
      })
    })
  }

  const cancelFn = () => {
    status.value = 'view'
    getDetail()
  }
  // 详情
  const getDetail = () => {
    ruleDetail().then((res: { result: any }) => {
      // form.value = res.result
      detail.value = res.result
    })
  }

  onMounted(() => {
    if (query.status) {
      status.value = query.status as string
    }
  })
  // 获取数据，keep-alive详情状态刷新数据
  onActivated(() => {
    getDetail()
  })
</script>
<style lang="less" scoped>
  .page-container {
    padding: 20px 0;
  }
  :deep(.arco-tabs-nav::before) {
    right: 20px;
    left: 20px;
  }
  .sticky-box {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 20px;
  }
  .item-operator {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 99;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    z-index: 99;

    .todo-title {
      font-size: 16px;
      font-weight: bold;
      color: #1d2129;
    }
  }
</style>
